<template>
  <page-view>
    <page-header title="订单">
    </page-header>
    <div class="content-box">



        <list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
          <div v-for="(item,index) in orderInfo" :key="index" class="order-class">
          <ul class="order-desc">
              <li><span></span></li>
              <!-- <li><span>{{formateDate()}}</span></li> -->
              <li><span></span></li>
              <li><span></span></li>
              <li><span></span></li>


              
          </ul>
          </div>
        </list> 
    </div>
  </page-view>
</template>

<script>
import { useStore } from 'vuex'
import { useRouter ,useRoute} from 'vue-router'
import PageView from '../components/PageView.vue';
import PageHeader from '../components/PageHeader.vue';
import { List,Image as VanImage} from 'vant';
import { reactive, toRefs } from '@vue/reactivity';
import api from '../utils/api';
import formateDate from '../filters/DateFilter.js'
export default {
  components: { PageView, PageHeader,List,VanImage },
  name:'Order',
  setup () {
    const route=useRoute();
    // let orderInfo=reactive({

    // })
    let info=reactive({
      loading:false,
      finished:true,
      orderInfo:null


    })

const getOrder=async (pageIndex)=>{
    info.loading=true;
    let result=await api.orderInfo.getMyOrderListByPage(pageIndex)
   console.log(result)
   info.orderInfo=result
  info.loading=false;//加载完之后需要手动关闭
  info.finished=info.orderInfo.pageIndex >=info.orderInfo.pageCount

}
getOrder(1)
 //下滚懒加载
function onLoad(){
 if( info.orderInfo.pageIndex<info.orderInfo.pageCount){
        getOrder(info.orderInfo.pageIndex+1)
    }
}






   
    return {onLoad,
    ...toRefs(info),
    formateDate,

    
    }
  }
}
</script>

<style lang="scss" scoped>

</style>